<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>hello</title>
    <!-- 导入vue包 -->
    <script src="./lib/vue2.6.10.js"></script>
    <script src="./lib/vue-resource@1.5.1.js"></script>
</head>
<body>
    <div id="app">
        <input type="button" value="Get" @click="httpGet">
        <input type="button" value="Post" @click="httpPost">
        <input type="button" value="jsonp" @click="httpJsonp">
        <hr>
        res:
        <pre>{{res}}</pre>

    </div>


    <script>
        // 创建一个vue实例
        var vm = new Vue({
            el:'#app', // 当前new的这个vue实例要控制的DOM
            data:{     // 所有的数据
                res: "hello"
            },
            methods: {
                httpGet(){
                    this.$http.get('http://localhost:8080/learnVue/data.json').then(
                        function (res) {
                            this.res = res.body;
                            console.log(res);
                        }
                    );
                },
                httpPost(){
                    // 跨域问题 
                    this.$http.post('http://localhost/echo.php', {}, {emulateJSON:true}).then(res=>{
                        console.log(res);
                    });
                },
                httpJsonp(){
                    this.$http.jsonp('http://localhost:8080/learnVue/data.json').then(
                        res => {
                            console.log(res);
                            
                    });
                }
            },

        })

    </script>
</body>
</html>